<template>
  <div class="tool-correct" v-loading="loading" style="min-height: 300px">
    <div>
      <component :is="currentComponent" @change="changeStep"></component>
    </div>
    <div
      class="container"
      style="text-align: center; padding: 200px 0"
      v-if="currentStep === -1 && !loading"
    >
      数据流程有问题，请找后台开发运维人员核对
    </div>
  </div>
</template>

<script setup lang="ts">
import { getDeviceCalibrationGetStep } from "@/api"
import One from "./correctComponent/one.vue"
import Two from "./correctComponent/two.vue"
import Three from "./correctComponent/three.vue"
import Four from "./correctComponent/four.vue"
import { useTool } from "./correctComponent/useTool"
import { ElMessage } from "element-plus"
const { calibrationBatch, endTime } = useTool()

const currentComponent = computed(() => {
  return [One, Two, Three, Four][currentStep.value]
})
const steps = [
  { key: 0, label: "选择需要校准的设备", com: One },
  { key: 1, label: "设置校准周期", com: Two },
  { key: 2, label: "校准结果", com: Three },
  { key: 3, label: "校准效果复核", com: Four }
]
const currentStep = ref(-1)

const changeStep = (step) => {
  currentStep.value = step
}

const loading = ref(true)
const getStep = async () => {
  loading.value = true
  const res = await getDeviceCalibrationGetStep()
  loading.value = false
  if (res.code === 200) {
    currentStep.value = res?.rows?.step - 1
    calibrationBatch.value = res?.rows?.calibrationBatch
    endTime.value = res?.rows?.calibrationEndTime
  } else {
    ElMessage.error(res.msg)
  }
}
onMounted(getStep)
</script>
<style lang="less">
.step-block {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
